@import (reference) "./../../style/mixin.less";
@import "./../../assets/iconfonts/iconfont.css";

.header-container {
    background-color: @base-color;
    .flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    .wh(100%, 50px);

    .header-slide-icon {
        .font(26px, #fff);
        .positionLeft;
    }

    .header-title {
        .font(20px, #fff);
    }

    .header-link {
        .font(40px, #fff);
        .positionRight;
    }

    .header-link-confim {
        font-size: 32px;
    }

    .nav-slide-list {
        .coverScreen(fixed);
        top: 88px;
        display: flex;
        flex-direction: column;

        .nav-link {
            .font(32px);
            border-bottom: 1Px solid #ddd;
            margin: 0 @common-wd;
            padding: 35px 20px;
            position: relative;

            &:before {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translate3d(0, -50%, 0);
                color: #666;
            }

            ;
        }
    }

    .nav-enter {
        transform: translate3d(-100%, 0, 0);
    }

    .nav-enter.nav-enter-active {
        transform: translate3d(0, 0, 0);
        transition: transform 300ms;
    }

    .nav-leave {
        transform: translate3d(0, 0, 0);
    }

    .nav-leave.nav-leave-active {
        transform: translate3d(-100%, 0, 0);
        transition: transform 300ms;
    }
}